<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Learn-Bullet Journal</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

		<style>
			img {
				vertical-align: bottom;
			}

			/* 通配符选择器 */
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			a:hover {
				text-decoration: none;
			}

			.clearfix::before,
			.clearfix::after {
				content: "";
				display: table;
			}

			.clearfix::after {
				clear: both;
			}

			.bd {
				border: 1px solid red;
			}

			.w {
				width: 1508px;
				margin: 0 auto;
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			/* ---------- 以下是header区 ---------- */
			header {}
			.top-bar {
				background: #292929;
				height: 50px;
				margin: 0;
			}
			.social_icons {
				padding: 17px 0 11px 40px;
			}
			.social_icons li {
				display: inline;
				vertical-align: middle;
				margin-right: 20px;
			}
			.social_icons li a {
				/* display: block; */
				font-size: 20px;
				color: #9a9a9a;
				text-align: center;
			}
			.social_icons li a:hover {
				color: #FFFFFF;
			}
			.menu {}
			.left-menu {
				margin: 0 27px;
			}
			.left-menu li {}
			.left-menu li a {
				display: block;
				font-size: 15px;
				line-height: 50px;
				color: #9a9a9a;
			}
			.left-menu li a:hover {
				color: #FFFFFF;
			}
			.right-menu {
				width: 87px;
				height: 50px;
				background-color: #515151;
				transition: all 2s cubic-bezier(.17,.67,.71,.29);
			}
			.right-menu a {
				display: block;
				font-size: 15px;
				line-height: 50px;
				color: #9A9A9A;
				padding-left: 25px;
				position: relative;
			}
			.right-menu li>:hover {
				color: #515151;
				background-color: #FFFFFF;
			}
			.right-menu>li:hover .right-menu_m {
				display: block;
				/* background-color: #FFFFFF; */
				/* background-color: rgba(255,255,255,0); */
				/* background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)) */
				/* background: rgba(255,255,255,1); */
			}
			.right-menu_m {
				position: absolute;
				display: none;
				width: 526px;
				height: 134px;
				top: 50px;
				right: 0;
				background-color: #FFFFFF;
				/* transition: all 2s cubic-bezier(.17,.67,.71,.29); */
			}
			/* .right-menu_m:hover{
				background: rgba(255,255,255,1);
			} */
			.right-menu_m li {
				display: block;
				font-size: 20px;
				padding: 58px 0 62px 0;
				text-align: center;
				/* cursor: pointer; */
			}
			.video {
				width: 100%;
				/* padding-bottom: 45%; */
				padding: 32px 0 40% 29px;
				/* height: 670px; */
				/* position: relative; */
				background: #1B1B1B url(images/Header-Learn.jpg) no-repeat center 0;
				background-size: 100% auto;
			}
			.video_logo {
				width: 223px;
				height: 29px;
			}
			.video_logo ul {}
			.video_logo ul li {}
			.video_logo ul li a {}
			/* .video_logo ul li a img{} */
			.video_menu {}
			.video_menu ul {}
			.video_menu ul li {
				margin-right: 10px;
			}
			.video_menu ul li a {
				color: #FFFFFF;
				font-size: 15px;
				line-height: 29px;
				padding: 0 0 12px 0;
				margin-left: 22px;
				transition: all 0.2s;
			}
			.video_menu a:hover {
				display: block;
				color: #d0d0d0;
				border-bottom: 1px solid #FFFFFF;
			}
			.block {
				height: 212px;
				/* width: 100%; */
				/* background: #f5f7ee; */
				/* background-color: #f7f3be; */
				/* box-align: cente; */
				padding-top: 46px;
			}
			.block h2 {
				font-family: "Bell MT";
				color: #333333;
				font-size: 28px;
				line-height: 37px;
				padding-bottom: 28px;
				/* text-align: center; */
				/* margin: auto; */
				/* position: relative; */
				/* top: 50%; */
				/* left: -50%; */
				/* white-space: nowrap; */
			}
			.block p{
				font-family: "Bell MT";
				font-size: 18px;
				line-height: 24px;
			}
			/* --------------- 以下是main区 --------------- */
			main{}
			.main_t{
				margin: 0 5%;
			}
			.tips{
				padding: 69px 104px 0 104px;
			}
			.tips_txt{
				width: 40%;
				height: 100%;
				padding-top: 5%;
			}
			.tips_txt h4{
				font-family: "Bell MT";
				font-size: 32px;
				line-height: 42px;
				padding-bottom: 22px;
			}
			.tips_txt p{
				font-family: "Bell MT";
				font-size: 20px;
				line-height: 26px;
				margin-bottom: 30px;
			}
			.tips_pic{
				/* padding-right: 5%; */
				width: 55%;
			}
			.tips_pic img{
				width: 100%;
				height: 100%;
			}
			.main_c{
				margin-top: 3%;
			}
			.index{
				margin: 0 0 2% 5%;
			}
			.index_txt{
				width: 40%;
				height: 100%;
				padding-top: 10%;
			}
			.index_txt h4{
				font-family: "Bell MT";
				font-size: 32px;
				line-height: 42px;
				padding-bottom: 22px;
			}
			.index_txt p{
				font-family: "Bell MT";
				font-size: 20px;
				line-height: 26px;
				margin-bottom: 30px;
			}
			.index_pic{
				width: 55%;
			}
			.index_pic img{
				width: 100%;
				height: 100%;
			}
			.index-m{
				width: 100%;
				background: url(images/Collections.jpg) no-repeat center 0;
				background-size: 100% auto;
				/* position: relative; */
				padding: 20% 0%;
			}
			.index-m_txt{
				margin: 0 26%;
			}
			.index-m_txt>h4{
				font-family: "Bell MT";
				font-size: 57px;
				line-height: 57px;
				color: #FFFFFF;
				padding-bottom: 25px;
			}
			.index-m_txt p{
				font-family: "Bell MT";
				font-size: 22px;
				line-height: 27px;
				color: #FFFFFF;
			}
			.main_b{
				margin-top: 90px;
			}
			.migration{
				margin: 0 11%;
			}
			.migration h2{
				font-family: "Bell MT";
				font-size: 32px;
				line-height: 42px;
				padding-bottom: 12px;
			}
			.migration p{
				font-family: "Bell MT";
				font-size: 20px;
				line-height: 38px;
				padding-bottom: 20px;
			}
			.next_steps{
				/* width: 100%;
				background: url(images/Learn.jpg) no-repeat center 0;
				background-size: 100% auto;
				padding: 100% 37% 100% 10%;
				position: relative; */
				width:100%; //关键
				height:auto;  //关键
				border-radius: 10px;
				background-size:100% auto;
				background-repeat:no-repeat;
				background-image: url(images/Learn.jpg);
				-webkit-background-size: cover;
				-moz-background-size:cover;
				-o-background-size: cover;
			}
			.next_steps_txt{
				height: auto;
				/* position: absolute;
				top: 0;
				left: 0; */
				padding: 17% 37% 17% 10%;
			}
			.nst_txt{}
			.nst_txt h2{
				font-family: "Bell MT";
				font-size: 57px;
				line-height: 72px;
				color: #FFFFFF;
				padding-bottom: 25px;
			}
			.nst_txt p{
				font-family: "Bell MT";
				font-size: 23px;
				line-height: 38px;
				padding-bottom: 20px;
				color: #FFFFFF;
			}
			.nst_learn{
				height: 52px;
				width: 246px;
			}
			.nst_learn ul{}
			.nst_learn ul li{
				border: 1px solid #FFFFFF;
				/* margin: 5px 76px; */
			}
			.nst_learn ul li a{
				display: block;
				font-family: "Bell MT";
				font-size: 14px;
				line-height: 23px;
				/* padding-bottom: 20px; */
				color: #FFFFFF;
				padding: 5px 76px;
				transition: all 0.5s;
			}
			.nst_learn ul li a:hover{
				background: #FFFFFF;
				color: #000;
			}
			.sign_up{
				background: #f5f7ee;
			}
			.su_reasons{
				padding-top: 50px;
				padding-bottom: 12px;
			}
			.su_reasons p{
				font-family: "Bell MT";
				font-size: 20px;
				line-height: 22px;
				text-align: center;
			}
			.su_reasons p:nth-child(1){
				font-size: 28px;
				padding-bottom: 33px;
			}
			.su_reasons p a{
				color: #000;
				transition: all 0.2s;
			}
			.su_reasons p a:hover{
				color: #a6a6a6;
			}
			.su_sign{
				display: flex;
				justify-content: center; /* 设置主轴居中对齐 */
				/* align-items: center;*/ /* 设置侧轴居中对齐 */ 
				padding-bottom: 37px;
			}
			input.contact_email{
				border: 0;
				outline: 0;
				width: 320px;
				display: inline-block;
				/* height: 55px; */
				padding-left: 10px;
				font-size: 15px;
				margin-right: 10px;
			}
			input.sign{
				border: 0;
				outline: 0;
				width: 150px;
				height: 55px;
				font-family: "Bell MT";
				font-size: 18px;
				color: #FFFFFF;
				background-color: #000000;
				transition: all 0.5s;
			}
			input.sign:hover{
				background-color: #bcbcbc;
			}
			/* --------------- 以下是footer区 --------------- */
			footer{
				height: 550px;
				width: 100%;
				background-color: #141317;
			}
			.footer_menu{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 3% 10% 0 10%;
			}
			.menu_text{
				width: 375px;
				height: 270px;
			}
			.menu_text h4{
				font-family: "Bell MT";
				font-size: 25px;
				color: #7f8c8d;
				padding-bottom: 30px;
			}
			.toggle_content{}
			.toggle_content p{
				padding-bottom: 10px;
			}
			.toggle_content p a{
				font-family: "Bell MT";
				font-size: 18px;
				color: #7f8c8d;
				transition: all 0.3s;
			}
			.toggle_content a:hover{
				color: #FFFFFF;
			}
			.selectors{
				display: flex;
				justify-content: center;
				/* align-items: center; */
				width: 80%;
				/* margin: 0 10%; */
				margin: 0 auto;
				height: auto; 
				border-top: 1px solid #1b1f23;
				position: relative;
			}
			.item{
				/* display: inline; */
				margin-left: 90%;
				margin-top: 5px;
				/* margin-bottom: 100px; */
				background-color: #fff;
				width: 105px;
				height: 50px;
			}
			.item ul{
				margin: 0;
				/* overflow: hidden; */
			}
			.item li{}
			.item a{
				font-size: 18px;
				line-height: 50px;
				color: #000;
				/* background-color: #fff; */
				/* padding: 17px 47px 15px 16p; */
				/* padding-top: 17px; */
				padding-left: 20px;
				/* padding-right: 45px; */
				position: relative;
			}
			.item>ul>li>a::before{
				content: "";
				width: 13px;
				height: 13px;
				border: 2px solid grey;
				border-left: 2px solid transparent;
				border-bottom: 2px solid transparent;
				transform: rotate(135deg);
				position: absolute;
				top: 0;
				left: 70px;
			}
			.item li:hover{
				display: block;
			}
			.item_menu{
				position: absolute;
				top: -236px;
				/* right: 0; */
			}
			.else{
				position: absolute;
				float: right;
				display: none;
				width: 105px
			}
			.item>ul>li:hover .else{
				display: block;
				background-color: #fff;
			}
			.else li{
				margin-bottom: 10px;
			}
			.else a{
				display: block;
				font-size: 18px;
				line-height: 40px;
				padding-left: 35px;
				color: #000;
			}
			.else>li>a:hover{
				color: #96a5a6;
			}
			.credits{
				/* display: flex; */
				/* justify-content: center; */
				/* align-items: center; */
				/* margin: 0 10%; */
				/* width: 830px; */
				margin-top: 100px;
				position: absolute;
				left: 0;
			}
			.credits p{
				font-family: "Bell MT";
				font-size: 19px;
				line-height: 25px;
				color: #595959;
			}
			.credits a{
				color: #7f8c8d;
				font-weight: bold;
				transition: all 0.2s;
			}
			.credits a:hover{
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="top-bar  clearfix">
				<ul class="social_icons fl">
					<li title="Bullet Journal on Facebook"><a href="" class="fa fa-facebook"></a></li>
					<li title="Bullet Journal on YouTube"><a href="" class="fa fa-youtube-play"></a></li>
					<li title="Bullet Journal on Pinterest"><a href="" class="fa fa-pinterest-p"></a></li>
					<li title="Bullet Journal on Instafram"><a href="" class="fa fa-instagram"></a></li>
					<li title="Email Bullet Journal"><a href="" class="fa fa-envelope-o"></a></li>
				</ul>
				<div class="menu fr">
					<ul class="left-menu fl">
						<li><a href="">LOGIN</a></li>
					</ul>
					<ul class="right-menu fr">
						<li>
							<a href="" class="fa fa-shopping-cart"> 0</a>
							<ul class="right-menu_m">
								<li>Your Cart is Empty</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div class="video clearfix">
				<div class="video_logo fl">
					<ul>
						<li  title="Bullet Journal">
							<a href=""><img src="images/White_410x.png" alt="" width="223" height="29"></a>
						</li>
					</ul>
				</div>
				<div class="video_menu fr">
					<ul>
						<li>
							<a href="" class="fl">LEARN</a>
							<a href="" class="fl">APP</a>
							<a href="" class="fl">BLOG</a>
							<a href="" class="fl">BOOK</a>
							<a href="" class="fl">COMMUNITY</a>
							<a href="" class="fl">SHOP</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="block clearfix" style="background-color: #eff1e8;">
				<div style="width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;">
					<h2 style="text-align: center; ">"will transform your life, in more ways than you can imagine."</h2>
					<p  style="text-align: center; ">
						– Hal Elrod, Author of
						<em>The Miracle Morning</em>
					</p>
				</div>
			</div>
		</header>
		<main>
			<div class="main_t ">
				<div class="tips clearfix">
					<div class="tips_txt fl" >
						<h4>Rapid Logging</h4>
						<p>
							Be it for taking notes or journaling, studies keep identifying benefits of writing by hand.
							 That said, it takes time and can be unorganized.
							 How can we enjoy the benefits while avoiding the shortcomings of hand writing? Rapid Logging.
						</p>
						<p>
							Rapid Logging is the language in which the Bullet Journal is written.
							 In short, it’s a way of capturing information as bulleted lists.
							 Let's start with the basics.
						</p>
					</div>
					<div class="tips_pic fr"  title="Rapid Logging"><img src="images/Rapid_Logging.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Bullets</h4>
						<p>
							If Rapid Logging is language the BuJo is written in, Bullets are the syntax.
							 Bullets are short-form sentences paired with symbols that visually categorize your entries into:
							 Tasks, Events, or Notes. Let's break it down...
						</p>
					</div>
					<div class="tips_pic fr" title="Bullets"><img src="images/Bullets.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Tasks</h4>
						<p>
							Tasks are represented by a simple dot “•”.
							 We use a dot instead of a checkbox because it's fast, clean, and can easily be transformed to reflect the state of the Task.
							 Tasks can have one of five states:
						</p>
					</div>
					<div class="tips_pic fr" title="Tasks"><img src="images/Tasks.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Events</h4>
						<p>
							Events are represented by the open circle “O” Bullet.
							 Events are date-related entries that can either be scheduled (e.g. “Charlie’s birthday”) 
							 or logged after they occur (e.g. “signed the lease”).
						</p>
						<p>
							Our experiences can be complicated and distracting. 
							 Rather than trying to capture the way you feel in the moment, keep your Event entries short and objective.
							 It will increase the odds of us writing them down.
							 The important thing is to have a record of your experience so that you can learn from it.
						</p>
					</div>
					<div class="tips_pic fr" title="Events"><img src="images/Events.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Notes</h4>
						<p>
							Notes are represented with a dash “–”.
							 Notes include: facts, ideas, thoughts, and observations. 
							 They're used to capture information or data you don't want to forget. 
							 This Bullet works well for meeting, lecture, or classroom notes.
						</p>
					</div>
					<div class="tips_pic fr" title="Notes"><img src="images/Notes.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Mix & Match</h4>
						<p>
							<strong>Tasks</strong>, <strong>Events</strong>, and <strong>Notes</strong>
							 will help you quickly capture your thoughts as they bubble up throughout the day. 
							 Don't worry about logging them in any particular order. 
							 The important thing is to get them out of your head, and onto the page.
						</p>
					</div>
					<div class="tips_pic fr" title="Mix & Match"><img src="images/Mix_and_match.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Nesting</h4>
						<p>
							Nesting Bullets can add some much needed color to your entries.
							 For example, nest <strong>Notes</strong> under an <strong>Event</strong> to capture important details.
							 Nest <strong>subtasks</strong> under the main Task to break things down into a series of steps. 
						</p>
					</div>
					<div class="tips_pic fr" title="Nesting"><img src="images/Nesting.png" alt=""></div>
				</div>
				<div class="tips clearfix">
					<div class="tips_txt fl">
						<h4>Signifiers</h4>
						<p>
							Signifiers are symbols that give your entries additional context at a glance.
							 They're placed to the left of Bullets so they stick out, making them easy to spot when scanning your pages. 
							 Here are two useful examples, but feel free to come up with your own.
						</p>
						<p>
							<strong>* = Priority</strong>: Used to mark the most important things on your list.
							 Use it sparingly. If everything is a priority, nothing is.
						</p>
						<p>
							<strong>! = Inspiration</strong>: Great ideas, personal mantras, and genius insights will never be misplaced again!
						</p>
					</div>
					<div class="tips_pic fr" title="Signifiers"><img src="images/Signifiers.png" alt=""></div>
				</div>
			</div>
			<div class="main_c">
				<div class="index  clearfix">
					<div class="index_txt fl">
						<h4>Putting it Together</h4>
						<p>
							Start by giving your page a short descriptive <strong>Topic</strong>.
							 This clarifies the purpose of the page and nature of its contents. 
							 In this example, it's simply the day's date.
						</p>
						<p>
							Once that’s done, be sure to <strong>number the page</strong>.Page numbers will serve to locate your content. 
						</p>
						<p>
							This example is known as the <strong>Daily Log</strong>.It's the workhorse of the Bullet Journal,
							 and one of the four main <strong>Collections</strong>.
						</p>
					</div>
					<div class="index_pic fr" title="Putting it Together"><img src="images/Daily_Log.png" alt=""></div>
				</div>
				<div class="index-m clearfix">
					<div class="index-m_txt">
						<h4>Collections</h4>
						<p>
							BuJo is a modular framework. Each module, or Collection, serves to organize related information.
							 You can mix and match, customize, or even create Collections to best suit your needs. 
							 Let’s take a look at the four core Collections:
							The Index, Future Log, Monthly Log, and the Daily Log.
						</p>
					</div>
				</div>
				<div class="index clearfix">
					<div class="index_txt fl">
						<h4>The Index</h4>
						<p>
							The Index lives at the front of your notebook, and serves to locate content in your Bullet Journal.
							 Simply add the Topics of your Collections and their page numbers to the Index, so you can quickly find them later.
						</p>
						<p>
							Collections that span a series of consecutive spreads are indexed like this: “Collection Topic: 5-10.”
						</p>
						<p>
							Some Collections are recurring and can be spread throughout your notebook.
							 These Collections can be indexed as such: “Collection Name: 5-10, 23, 34-39”
						</p>
					</div>
					<div class="index_pic fr" title="The Index"><img src="./images/Index.png" alt=""></div>
				</div>
				<div class="index clearfix">
					<div class="index_txt fl">
						<h4>The Future Log</h4>
						<p>
							This Collection is used to store dated entries that will occur outside the current month.
							Provided is a simple six month template, but there are many other creative templates for setting up your Future Log.
						</p>
						<p>
							Everything we task ourselves with is a potential experience.The Future Log serves as your time machine,
							 allowing you to glimpse the outlines of the future you're actively working towards.
						</p>
						<p>
							<strong>Tip</strong>: Each month, review your Future Log to see if anything can be migrated into the new Monthly Log.
						</p>
					</div>
					<div class="index_pic fr" title="The Future Log"><img src="images/Future_Log.png" alt=""></div>
				</div>
				<div class="index clearfix">
					<div class="index_txt fl">
						<h4>The Monthly Log</h4>
						<p>
							The Monthly Log is a spread of facing pages that consists of a Calendar and a Task page. 
						</p>
						<strong>The Calendar Page</strong>
						<p>
							This minimal calendar is designed to provide a birdseye view of the month.
							 You can use it to schedule Events and Tasks, record Events after they happen, or both.
							 Entries here should be as short as possible, as this page is designed for reference only.
						</p>
						<strong>The Task Page</strong>
						<p>
							This page is designed to help you take a monthly mental inventory: What are the priorities for the month?
							 What remains undone from last month? What matters now? Get it off your mind, and list it here.
						</p>
						<p>
							<strong>Tip</strong>: Leave some room in the left margin of the page to add Signifiers to mark important entries.
						</p>
					</div>
					<div class="index_pic fr" title="The Monthly Log"><img src="images/Monthly_Log.png" alt=""></div>
				</div>
				<div class="index clearfix">
					<div class="index_txt fl">
						<h4>Daily Log</h4>
						<p>
							The Daily Log is designed for day-to-day use.At the top of the page, record the date as your topic. 
							 Throughout the course of the day, simply Rapid Log your Tasks, Events, and Notes as they occur.
							 If you don’t fill a page, add the next date wherever you left off and you’re ready to continue.
						</p>
						<p>
							<strong>Tip</strong>: Don’t set up Daily Logs way ahead of time. Create them as you go or the night before.
							 You never know how much space you may need any given day.
						</p>
						<p></p>
					</div>
					<div class="index_pic fr" title="Daily Log"><img src="images/Daily_Log.png" alt=""></div>
				</div>
				<div class="index clearfix">
					<div class="index_txt fl">
						<h4>Custom Log</h4>
						<p>
							The Bullet Journal is designed to become whatever you need it to be, be it a fitness or fertility tracker,
							 food log, diary, sketchbook etc. You're encouraged to design your own Custom Collections.
						</p>
						<p>
							Figuring out what you need your Bullet Journal to be is an important part of the process,
							 a process that begins with regularly examining how you're spending your time and energy.
							 We form this habit through <strong>Migration</strong>.
						</p>
					</div>
					<div class="index_pic fr" title="Custom Log"><img src="images/Custom_Log.png" alt=""></div>
				</div>
			</div>
			<div class="main_b">
				<div class="migration">
					<h2>Migration</h2>
					<p>
						We lead busy lives, but being busy doesn't necessarily mean we're being productive.
						 Productive means that we're using our time wisely by focusing on what matters.
						 Monthly Migration helps us accomplish this by weeding out distractions.
					</p>
					<p>
						At the very end of each month, set up a new Monthly Log. Once that's done, review the pages of the month gone by.
						 Chances are, you didn't get around to completing all your Tasks. 
						 That's fine! What's important is figuring out which incomplete Tasks are worth your limited time and energy moving forward. 
						 Strike out those that aren't, and migrate the ones that are.
					</p>
					<p>
						To Migrate a Task, simply turn the “•” into “>” to indicate that you’ve moved that Task forward onto the Task Page
						 of your new Monthly Log or into an appropriate Collection. If you wrote down a book title for example, 
						 you would migrate that entry into your "Books to Read" Collection.
					</p>
					<p>
						Once you've Migrated open Tasks, check your Future Log. See if any Tasks or Events listed there have become current.
						 If so, migrate those entries from your Future Log into your new Monthly Log.
					</p>
					<p>
						It may seem like a lot of effort to have to rewrite all these things, but that’s intentional.
						 This process makes you pause and consider each item. If an entry isn’t even worth the effort to rewrite it, 
						 then it’s probably not that important. Get rid of it. The purpose of Migration is to surface what's worth the effort, 
						 become aware of our actions, and to separate the signal from the noise. This is where BuJo shifts from a system, 
						 into the practice...
					</p>
				</div>
				<div class="next_steps">
					<div class="next_steps_txt">
						<div class="nst_txt">
							<h2>Next Steps</h2>
							<p>
								The Bullet Journal method is a mindfulness practice disguised as a productivity system.
								 Once you're comfortable with the system above, you'll be ready to move on to the mindfulness practice, 
								 and learn how to live with intention.
							</p>
						</div>
						<div class="nst_learn">
							<ul>
								<li>
									<a href="">LEARN THE PRACTICE</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="sign_up">
					<div class="su_reasons">
						<p>3 reasons to subscribe:</p>
						<p>
							1. Get the first two Chapters of 
							<strong><em title="The Bullet Journal Method"><a href="">The Bullet Journal Method</a></em></strong>.
						</p>
						<p>
							2. Get access to our <strong>reference guide</strong> (available 20+ languages!)
						</p>
						<p>
							3. Be the first to know about <strong>news, tips, and deals</strong>.
						</p>
					</div>
					<div class="su_sign">
						<input class="contact_email" type="email" name="contact[email]" title="请填写此字段。" required placeholder="Enter your email address..."><br>
						<input class="sign" type="submit" value="SIGN UP"><br>
					</div>
				</div>
			</div>
		</main>
		<footer>
			<div class="footer_menu">
				<div class="menu_text">
					<h4>Featured</h4>
					<div class="toggle_content">
						<p title="The Bullet Journal Method"><a href="">Book</a></p>
						<p title="The Notebook"><a href="">Notebook</a></p>
						<p title="Wholesale"><a href="">Wholesale</a></p>
						<p title="Custom Journals"><a href="">Custom Notebooks</a></p>
					</div>
				</div>
				<div class="menu_text">
					<h4>Help</h4>
					<div class="toggle_content">
						<p title="https://help.bulletjournal.com/"><a href="">Support</a></p>
						<p title="/search?nopreview"><a href="">Search</a></p>
						<p title="https://help.bulletjournal.com/category/6-shipping-delivery"><a href="">Shipping</a></p>
						<p title="https://help.bulletjournal.com/article/18-returns"><a href="">Returns</a></p>
					</div>
				</div>
				<div class="menu_text">
					<h4>Company</h4>
					<div class="toggle_content">
						<p title="About"><a href="">About</a></p>
						<p title="Press"><a href="">Press</a></p>
						<p><a href="">Terms of service</a></p>
						<p><a href="">Privacy Policy</a></p>
					</div>
				</div>
				<div class="menu_text">
					<h4>Connect</h4>
					<div class="toggle_content">
						<p title="http://instagram.com/bulletjournal"><a href="">Instagram</a></p>
						<p title="http://youtube.com/bulletjournal"><a href="">YouTube</a></p>
						<p title="http://pinterest.com/bulletjournal"><a href="">Pinterest</a></p>
						<p title="http://faccebook.com/bulletjournal"><a href="">Facebook</a></p>
					</div>
				</div>
			</div>
			<div class="selectors">
				<div class="item">
					<ul >
						<li>
							<a href="">CAD</a>
							<div class="item_menu fr">
								<ul class="else">
									<li>
										<a href="">USD</a>
										<a href="">CAD</a>
										<a href="">AUD</a>
										<a href="">GBP</a>
										<a href="">EUR</a>
										<a href="">JPY</a>
									</li>
								</ul>
							</div>
							
						</li>
					</ul>
				</div>
				<div class="credits">
					<p>
						© 2020 <a href="">Bullet Journal</a>. Lightcage LLC, All rights reserved. <a href="">Powered by Shopify</a>
					</p>
				</div>
			</div>
			
		</footer>
	</body>
</html>
